<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课堂随机点名</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f8ff;
            color: #333;
        }
        .container {
            text-align: center;
            background-color: white;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            max-width: 500px;
            width: 90%;
        }
        h1 {
            color: #2c3e50;
            margin-bottom: 30px;
        }
        .selected-name {
            font-size: 36px;
            font-weight: bold;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 30px 0;
            padding: 20px;
            border-radius: 10px;
            background-color: #f8f9fa;
            transition: all 0.3s;
        }
        .selected-name.highlight {
            background-color: #fff3cd;
            border: 3px solid #ffc107;
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(255, 193, 7, 0.5);
        }
        .blink {
            animation: blink 0.2s infinite;
        }
        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        button {
            padding: 12px 30px;
            font-size: 18px;
            background-color: #2ecc71;
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 20px;
        }
        button:hover {
            background-color: #27ae60;
            transform: translateY(-2px);
        }
        button:disabled {
            background-color: #95a5a6;
            cursor: not-allowed;
            transform: none;
        }
        .history {
            margin-top: 30px;
            width: 100%;
        }
        .history h3 {
            color: #2c3e50;
            margin-bottom: 15px;
        }
        .history ul {
            list-style: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }
        .history li {
            background-color: #e8f4f8;
            padding: 8px 15px;
            border-radius: 20px;
            color: #3498db;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>课堂随机点名</h1>
        
        <div id="selectedName" class="selected-name">准备开始</div>
        
        <button id="startBtn">开始抽取</button>
        
        <div class="history">
            <h3>历史记录</h3>
            <ul id="historyList"></ul>
        </div>
    </div>

    <audio id="bgMusic" loop>
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
        您的浏览器不支持音频元素。
    </audio>

    <script>
        // 默认名字列表
        const defaultNames = [
            "陈书佑", "廖文熙", "骆韦旭", "曾方媛", "唐雨溪", "戴鸿程", "雷正韬", "陈明萱", "骆文博", "周钰昕",
            "李雅琪", "全丹丹", "李文倩", "肖杰", "秦哲轩", "唐任飞", "陈金燕", "陈厚华", "邓忆涵", "李歆瑶",
            "廖美琦", "李皓轩", "骆文轩", "肖雨洋", "陈子馨", "吴安然", "邓岩松", "谢名轩", "江雨寒", "周梓健",
            "邓梓楚", "李瑾欣", "朱晨曦", "骆美君", "江昭乐", "李品阳", "王静琛", "雷焕梓", "刘世蓬", "江语欣",
            "廖凌广", "李佳讯", "何俊佑", "刘巧玉", "李婉凝", "刘予妍", "尹梓权", "徐馨", "雷子迪", "王文浩",
            "陈俊熙", "雷紫馨", "付诗雅"
        ];

        // DOM元素
        const selectedName = document.getElementById('selectedName');
        const startBtn = document.getElementById('startBtn');
        const historyList = document.getElementById('historyList');
        const bgMusic = document.getElementById('bgMusic');

        // 名字数组
        let names = [];
        // 历史记录数组
        let history = [];
        // 随机选择定时器
        let randomTimer = null;
        // 自动停止定时器
        let stopTimer = null;

        // 初始化
        function init() {
            loadNames();
            
            // 事件监听
            startBtn.addEventListener('click', startRandom);
            
            // 从本地存储加载历史记录
            const savedHistory = localStorage.getItem('randomNameHistory');
            if (savedHistory) {
                history = JSON.parse(savedHistory);
                renderHistory();
            }
        }

        // 加载名字
        function loadNames() {
            const savedNames = localStorage.getItem('randomNames');
            if (savedNames) {
                names = JSON.parse(savedNames);
            } else {
                names = [...defaultNames];
                saveNames();
            }
        }

        // 保存名字到本地存储
        function saveNames() {
            localStorage.setItem('randomNames', JSON.stringify(names));
        }

        // 开始随机选择
        function startRandom() {
            if (names.length === 0) {
                alert('没有可用的学生姓名！');
                return;
            }
            
            startBtn.disabled = true;
            selectedName.textContent = "抽取中...";
            selectedName.classList.add('blink');
            
            // 播放音乐
            bgMusic.currentTime = 0;
            bgMusic.play().catch(e => console.log('自动播放被阻止:', e));
            
            // 快速切换名字
            randomTimer = setInterval(() => {
                const randomIndex = Math.floor(Math.random() * names.length);
                selectedName.textContent = names[randomIndex];
            }, 100);
            
            // 3-5秒后自动停止
            const stopTime = 3000 + Math.random() * 2000; // 3-5秒随机时间
            stopTimer = setTimeout(() => {
                stopRandom();
            }, stopTime);
        }

        // 停止随机选择
        function stopRandom() {
            clearInterval(randomTimer);
            clearTimeout(stopTimer);
            selectedName.classList.remove('blink');
            
            // 停止音乐
            bgMusic.pause();
            
            // 高亮显示选中的名字
            selectedName.classList.add('highlight');
            
            // 启用按钮
            setTimeout(() => {
                startBtn.disabled = false;
            }, 3000);
            
            // 添加到历史记录
            addToHistory(selectedName.textContent);
        }

        // 添加到历史记录
        function addToHistory(name) {
            history.unshift(name);
            if (history.length > 10) {
                history.pop();
            }
            renderHistory();
            
            // 保存到本地存储
            localStorage.setItem('randomNameHistory', JSON.stringify(history));
        }

        // 渲染历史记录
        function renderHistory() {
            historyList.innerHTML = '';
            history.forEach(name => {
                const li = document.createElement('li');
                li.textContent = name;
                historyList.appendChild(li);
            });
        }

        // 初始化应用
        init();
    </script>
</body>
</html>